<!DOCTYPE html>
{% load static %}
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布新文章 - 我的博客</title>
    <link rel="stylesheet" href="{% static 'users/bulma.css' %}">
    <style>
        .navbar {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .editor-container {
            max-width: 760px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        
        .editor-box {
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 2rem;
            margin-top: 2rem;
        }
        
        .dynamic-textarea {
            min-height: 300px;
            font-family: 'Courier New', monospace;
            resize: vertical;
        }
    </style>
</head>
<body>
    <!-- 导航栏（保持与base.html一致） -->
    <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item" href="/">
                    <strong>我的博客</strong>
                </a>
            </div>

            <div class="navbar-menu">
                <div class="navbar-start">
                    <a class="navbar-item is-active" href="/">首页</a>
                    {% for category in category_list %}
                    <a class="navbar-item" href="{% url 'blog:category_list' category.id %}">
                        {{ category.name }}
                    </a>
                    {% endfor %}
                </div>

                <div class="navbar-end">
                    <div class="navbar-item">
                        {% if user.is_authenticated %}
                        <div class="buttons">
                            <a class="button is-primary" href="{% url 'users:user_info' %}">
                                <strong>{{ user.username }}</strong>
                            </a>
                            <a href="{% url 'users:logout' %}" class="button is-primary">退出</a>
                        </div>
                        {% else %}
                        <div class="buttons">
                            <a class="button is-primary" href="{% url 'users:register' %}">
                                <strong>注册</strong>
                            </a>
                            <a class="button is-light" href="{% url 'users:login' %}">
                                登录
                            </a>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主编辑器区域 -->
    <div class="editor-container">
        <div class="editor-box">
            <h1 class="title is-3 has-text-centered mb-5">撰写新文章</h1>
            
            <form method="post" action="{% url 'blog:add_post' %}">
                {% csrf_token %}
                
                <!-- 标题输入 -->
                <div class="field">
                    <label class="label">文章标题</label>
                    <div class="control">
                        <input class="input" type="text" name="title" required 
                               placeholder="请输入文章标题（不超过60字）" maxlength="60">
                    </div>
                </div>

                <!-- 分类和标签选择 -->
                <div class="columns">
                    <div class="column">
                        <div class="field">
                            <label class="label">分类</label>
                            <div class="control">
                                <div class="select is-fullwidth">
                                    <select name="category" required>
                                        {% for category in category_list %}
                                        <option value="{{ category.id }}">{{ category.name }}</option>
                                        {% empty %}
                                        <option disabled>暂无分类，请先创建分类</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="field">
                            <label class="label">标签</label>
                            <div class="control">
                                <div class="select is-fullwidth">
                                    <select name="tags">
                                        <option value="">无标签</option>
                                        {% for tag in tag_list %}
                                        <option value="{{ tag.id }}">{{ tag.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 文章摘要 -->
                <div class="field">
                    <label class="label">文章摘要</label>
                    <div class="control">
                        <textarea class="textarea" name="desc" rows="3" 
                                  placeholder="请输入文章摘要（不超过200字）" maxlength="200"></textarea>
                    </div>
                </div>

                <!-- 正文编辑器 -->
                <div class="field">
                    <label class="label">文章正文</label>
                    <div class="control">
                        <textarea class="textarea dynamic-textarea" name="content" 
                                  required placeholder="开始你的创作..."></textarea>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="field is-grouped is-grouped-centered mt-6">
                    <div class="control">
                        <button type="submit" class="button is-primary is-medium">
                            <span class="icon"><i class="fas fa-paper-plane"></i></span>
                            <span>立即发布</span>
                        </button>
                    </div>
                    <div class="control">
                        <a href="{% url 'blog:index' %}" class="button is-light is-medium">
                            取消返回
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 页脚（保持与base.html一致） -->
    <footer class="footer">
        <div class="content has-text-centered">
            <p>
                <strong>我的博客</strong> 基于Django构建。© 2025 mbh and wyh 版权所有
            </p>
        </div>
    </footer>

    <!-- 脚本 -->
    <script src="{% static 'users/js/all.min.js' %}"></script>
    <script>
        // 自动调整文本框高度
        function autoResize(textarea) {
            textarea.style.height = 'auto';
            textarea.style.height = textarea.scrollHeight + 'px';
        }

        document.querySelectorAll('textarea').forEach(textarea => {
            textarea.addEventListener('input', () => autoResize(textarea));
            autoResize(textarea); // 初始化调整
        });
    </script>
</body>
</html>